<template>
<div>

  <div class="cal_con">
    <div class="cal_header">
      <div class="cal_h_left">
        <div
          class="cal_h_btn"
          @click="preYear"
        >
          <svg class="cal_h_l_icon">
            <polyline
              points="6,0 2,4 6,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
            <polyline
              points="10,0 6,4 10,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
          </svg>
        </div>
        <div
          class="cal_h_btn"
          @click="preMonth"
        >
          <svg class="cal_h_l_icon">
            <polyline
              points="6,0 2,4 6,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
          </svg>
        </div>
      </div>

      <div>
        <span class="cal_h_time">{{ year }} 年 </span>
        <span class="cal_h_time">{{ month }} 月</span>
      </div>

      <div class="cal_h_left">
        <div
          class="cal_h_btn"
          @click="nextMonth"
        >
          <svg class="cal_h_l_icon">
            <polyline
              points="2,0 8,4 2,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
          </svg>
        </div>
        <div
          class="cal_h_btn"
          @click="nextYear"
        >
          <svg class="cal_h_l_icon">
            <polyline
              points="2,0 8,4 2,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
            <polyline
              points="6,0 12,4 6,8"
              style="fill:none;stroke:#909399;stroke-width:1"
            />
          </svg>
        </div>
      </div>
    </div>

    <div class="cal_month">
      <div class="cal_m_weeks">
        <span
          v-for="w in weeks"
          :key="w"
          class="cal_m_day_cell"
        >{{w}}</span>
      </div>

      <div class="cal_m_days">
        <div
          v-for="(ds, index) in monthData"
          :key="index"
          class="cal_m_day_line"
        >
          <div
            v-for="d in ds"
            :key="d.day"
            class="cal_m_day_cell"
            :style="{color: getCellColor(d)}"
            @mouseenter="mouseenter(d, $event)"
            @mouseleave="mouseleave(d, $event)"
            @click="dayclick(d)"
          >
            {{ d.day }}<slot :name="d.fullYear + '-' + d.month + '-' + d.day"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="schedule">
    <ul>
      <li v-for="item in weekschedule" :key="item.id" style="height:20px;background-clolor:#aa0000">
        {{item.content}}
        <button style="float:right;border-radius:25%;width:30px;height:20px;background-color:#9999ff;" @click="deleteSchedule(item.id,item.weekday)">-</button>
        </li>
    </ul>
    <div>
      <div v-show="addshow">
        <input v-model="content"/>
        <button style="border-radius:25%;width:30px;height:20px;background-color:#9999ff;" @click="postSchedule">保存</button>
        <button style="border-radius:25%;width:30px;height:20px;background-color:#9999ff;" @click="chancel">取消</button>
      </div>
    <span style="float:left;">
      <button style="border-radius:25%;width:30px;height:20px;background-color:#9999ff;" @click="addSchedule">+</button>
    </span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Calendar',
  props: {
    date: {
      type: Date,
      default: () => new Date()
    }
  },
  data () {
    return {
      now: this.date,
      year: 0,
      month: 0,
      weeks: ["日", "一", "二", "三", "四", "五", "六"],
      monthData: [],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      currentDay: new Date().getDate(),
      currentWeekday:new Date().getDay(),
      weekschedule:[],
      content:'',
      addshow:false
    }
  },
  computed: {
  },
 
  mounted () {
    this.setYearMonth(this.now)
    this.generateMonth(this.now)
    this.getSchedule(new Date().getDay())
  },
  methods: {
    async getSchedule(d) {
            try {
                let result = await this.$http.get("/schedule/" + d);
                console.log(result.data.data[0]);
                this.weekschedule = result.data.data;
            } catch (err) {
              console.log(err)
            }
    },
    async deleteSchedule(id,weekday) {
            try {
              let result = await this.$http.delete("/schedule/" + id);
              this.getSchedule(weekday)
                console.log(result)
            } catch (err) {
              console.log(err)
            }
    },
    async postSchedule(){
      console.log(this.content)
      let result=await this.$http.post("/schedule",{
        id:0,
        weekday:this.currentWeekday,
        content:this.content}
      )
      this.addshow=false
      this.content=""
      this.getSchedule(this.currentWeekday)
    },
    addSchedule(){
      this.addshow=true
    },
    chancel(){
      this.addshow=false
      this.content=""
    },
     dayclick(d){
      console.log(d.date.getDay())
      this.currentDay=d.date.getDate()
      this.currentWeekday=d.date.getDay()
      console.log(this.currentDay)
      this.getSchedule(this.currentWeekday)
    },
    setYearMonth (now) {
      this.year = now.getFullYear()
      this.month = now.getMonth() + 1
    },
    preYear () {
      let n = this.now
      let date = new Date(n.getFullYear() - 1, n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

      this.setYearMonthInfos(date)
    },
    preMonth () {
      let n = this.now
      let date = new Date(n.getFullYear(), n.getMonth() - 1, n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

      this.setYearMonthInfos(date)
    },
    nextYear () {
      let n = this.now
      let date = new Date(n.getFullYear() + 1, n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

      this.setYearMonthInfos(date)
    },
    nextMonth () {
      let n = this.now
      let date = new Date(n.getFullYear(), n.getMonth() + 1, n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

      this.setYearMonthInfos(date)
    },
    setYearMonthInfos (date) {
      this.setYearMonth(date)
      this.generateMonth(date)
      this.now = date
      this.dateChange()
    },
    generateMonth (date) {
      date.setDate(1)
      // 星期 0 - 6， 星期天 - 星期6
      let weekStart = date.getDay()

      let endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
      let dayEnd = endDate.getDate()
      // 星期 0 - 6， 星期天 - 星期6
      let weeEnd = endDate.getDay()

      let milsStart = date.getTime()
      let dayMils = 24 * 60 * 60 * 1000
      let milsEnd = endDate.getTime() + dayMils

      let monthDatas = []
      let current;
      // 上个月的几天
      for (let i = 0; i < weekStart; i++) {
        current = new Date(milsStart - (weekStart - i) * dayMils)
        monthDatas.push({
          type: -1,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate()
        })
      }
      // 当前月
      for (let i = 0; i < dayEnd; i++) {
        current = new Date(milsStart + i * dayMils)
        monthDatas.push({
          type: 0,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate()
        })
      }
      // 下个月的几天
      for (let i = 0; i < (6 - weeEnd); i++) {
        current = new Date(milsEnd + i * dayMils)
        monthDatas.push({
          type: 1,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate()
        })
      }

      this.monthData = []
      for (let i = 0; i < monthDatas.length; i++) {
        let mi = i % 7;
        if (mi == 0) {
          this.monthData.push([])
        }
        this.monthData[Math.floor(i / 7)].push(monthDatas[i])
      }

      // 少于6行，补足6行
      if (this.monthData.length <= 5) {
        milsStart = current.getTime()
        let lastLine = []
        for (let i = 1; i <= 7; i++) {
          current = new Date(milsStart + i * dayMils)
          lastLine.push({
            type: 1,
            date: current,
            fullYear: current.getFullYear(),
            month: current.getMonth() + 1,
            day: current.getDate()
          })
        }
        this.monthData.push(lastLine)
      }
    },

    getCellColor (d) {
      if (d.fullYear == this.currentYear && d.month == this.currentMonth && d.day == this.currentDay) {
        return "#409eff"
      }
      let color = d.type == -1 ? '#c0c4cc' : (d.type == 1 ? '#c0c4cc  ' : '')

      return color;
    },
    mouseenter (d, event) {
      this.$emit("enter", event, d)
    },
    mouseleave (d, event) {
      this.$emit("leave", event, d)
    },
    dateChange () {
      let fullYear = this.now.getFullYear()
      let month = this.now.getMonth()

      let startDay = new Date(fullYear, month, 1)
      let endDay = new Date(fullYear, month + 1, 0, 23, 59, 59)
    }
  }
}
</script>

<style scoped lang="css">
.schedule{
  margin: 10px;
  padding: 10px;
}
.cal_con {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 10px;

    color: #606266;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 #0000006e;
    background: #fff;
    border-radius: 4px;
    margin: auto;
}
  

  
.cal_month {
    font-size: 12px;
    text-align: center;
    height: calc(100% - 34px);
}

.cal_m_day_cell {
    width: 24px;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    position: relative;
}

.cal_m_day_cell:hover {
    color: #409eff;
}

.cal_m_weeks {
    height: 16px;
    padding: 8px;
    display: flex;
    justify-content: space-around;
    justify-items: center;
    border-bottom: 1px solid #e4e7ed;
}

.cal_m_days {
height: calc(100% - 49px);
padding: 8px;
display: flex;
justify-content: space-around;
justify-items: center;
flex-wrap: wrap;
}

.cal_m_day_line {
    width: 100%;
    display: flex;
    justify-content: space-around;
    justify-items: center;
}
.cal_header {
height: 24px;
padding: 5px;
font-size: 14px;
line-height: 24px;
display: flex;
justify-content: space-between;
justify-items: center;
}
.cal_h_time {
    cursor: pointer;
}
.cal_h_time:hover {
    color: #409eff;
}

.cal_h_left {
    height: 100%;
    display: flex;
}
.cal_h_btn {
    height: 100%;
    width: 24px;
    cursor: pointer;
    }

.cal_h_btn:hover {
background-color: #ebeef5;
}

.cal_h_l_icon {
height: 8px;
width: 12px;
margin: auto;
}

</style>